<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false"
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="search-form">
			<view class="search">
				<input type="text" v-model="rushParam.goodsName" style="padding: 5px 10px; background-color: rgb(247, 247, 247); border-radius: 17px;" class="uni-input" />
				<view class="search-btn">搜索</view>
			</view>
		</view>
		<view class="xiaoliang">
			<view class="yq_dan">已抢购<text>{{countData.ordercount}}</text>单</view>
			<view class="yq_jin">已抢<text>{{countData.orderprice}}</text>金额</view>
		</view>
		<view class="index_area">
			<view class="ul">
				<view class="ground" v-for="(item,index) in rushList" :key="index" @click="rushClick(item)">
					<view  class="slltyu">
						<view class="ground_img">
							<image :src="item.goodsimage" mode=""></image>
						</view>
					</view>
					<view class="merui">{{item.goodsName}}</view>
					<view class="duise">
						<view class="name_text">
							{{item.goodsPrice}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-pagination :pageSize="rushParam.limit" :current="rushParam.page" :total="rushParam.total" title="标题文字" :show-icon="true" @change="handlePageChange" />
	</view>
</template>

<script>
	import {fetchRushList,fetchRushIndex} from '@/api/rush.js';
	export default{
		data(){
			return{
				rushParam: {
					page: 1,
					total:0,
					limit: 20,
					goodsName:""
				},
				
				navstyle: {
					title: "抢购商品",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left",
				},
				titleStyle: {
					fontWeight: 700
				},
				goodsName:"",
				rushswitch:"",
				rushList: [],
				loadingType:'more',
				countData:{},
			}
		},
		onLoad() {
			this.loadData()
			// fetchRushIndex().then(Response=>{
			// 	this.rushswitch=Response.data.rushswitch;
			// 	if(this.rushswitch==0){
			// 		uni.showModal({
			// 			title: "提示",
			// 			content: "抢购暂未开放",
			// 			showCancel: false,
			// 			confirmText:"",
			// 		})
			// 		setTimeout(()=>{
			// 			uni.reLaunch({
			// 			  url: '/pages/index/rush' // 替换成上一页的路径
			// 			});
			// 		},2000)
			// 	}
			// })
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/index/rush' // 替换成上一页的路径
				});
			},
			rushClick(item){
				uni.redirectTo({
					url: `/pages/rush/detail?id=${item.id}`
				});
			},
			handlePageChange(page) {
				console.log(page.current)
			  this.rushParam.page = page.current;
			  // 调用后端接口，获取数据
			  this.loadData();
			},
			loadData(){
				
				this.rushList  = []
				this.rushParam.goodsName = this.goodsName;
				
				fetchRushList(this.rushParam).then(response => {
					let list = response.data.list;
					console.log(response,4444)
					console.log(list,333333)
					this.rushList = list.data;
					this.rushParam.total = list.total;
					this.countData = response.data.info
				
				});
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
	}
	.search{
	    display: flex;
	    align-items: center;
	    background-color: #fff;
	    margin-bottom: 5px;
	    width: 100%;
	}
	.search .uni-input{
	    background-size: 13px 13px;
	    background-position-x: 10px;
	    background-position-y: 50%;
	    color: #333;
	    width: 80%;
	    font-size: 12px;
	    padding: 7px 7px;
	    outline: none;
	    border: 0;
	    margin-left: 2%;
	}
	.search-btn{
	    width: 15%;
	    font-size: 14px;
	    text-align: center;
	    color: #999;
	    background-color: initial;
	    padding: 0;
	    border: 0;
	}
	.xiaoliang{
	    width: 100%;
	    color: #fff;
	    padding: 13px;
	    display: flex;
	    justify-content: space-between;
	    background: linear-gradient(#d66c6b, #ed6266);
	    position: -webkit-sticky;
	    position: sticky;
	    top: 0;
	    left: 0;
	    z-index: 999;
	    font-size: 20px;
	    border-radius: 0 0 5px 5px;
	}
	.yq_dan{
	    width: 50%;
	    text-align: center;
	}
	.yq_jin{
	    width: 50%;
	    text-align: center;
	}
	.index_area{
	    display: flex;
	    flex-direction: column;
	    font-size: 14px;
		height: 70vh;
		overflow-y:auto;
		overflow-x:hidden;
	    color: #333;
	    margin-top: 16px;
	    background-color: #fff;
	}
	.index_area .ul{
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	    margin-top: 10px;
	}
	.ground {
	    width: 48.5%;
	    background-color: #fff;
	    box-shadow: 0 2px 10px #cfcfcf;
	    border-radius: 8px;
	    overflow: hidden;
	    padding-bottom: 10px;
	    margin: 5px 0;
	}
	.slltyu{
	    width: 100%;
	    height: 175px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.ground_img {
	    width: 100%;
	    height: 175px;
	}
	.ground_img image{
	    width: 100%;
	    height: 175px;
	}
	.merui{
	    padding: 5px 0 5px 5px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.duise{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    padding: 5px 5px 5px 5px;
	}
	.name_text {
	    font-size: 16px;
	    color: #f2180c;
	}
	.uni-pagination{
		height: 55px;
		padding: 0 10px;
	}
</style>